<template>
<div id="bd" class="row">
        <div class="wp fl">
            <div class="item">
                <div class="item-base">
                    <div class="item-name">醒来觉得甚是爱你</div>
                    <div class="item-meta">
                        <span class="fr">播放 <span class="f16">6347</span> 次</span>
                        <em><i class="fa fa-pencil"></i> 朱生豪</em>
                        <em><i class="fa fa-microphone"></i> 宁二</em>
                        <em><i class="fa fa-clock-o"></i> 5:59</em>
                        
                    </div>
                    <div class="item-pic">
                        <img src="http://yuedu.fm/static/file/large/e0a74a36c42edda51db9015e51883ad5" alt="醒来觉得甚是爱你 - 悦读FM" />
                    </div>
                    <div id="yuedu_player"></div>
                    <div id="jp_container_1" class="yd-player row">
                        <div class="yd-controls jp-controls fl">
                            <a href="javascript:;" class="jp-play" tabindex="1" data-pid="1021"><i class="fa fa-play"></i></a>
                            <a href="javascript:;" class="jp-pause" tabindex="1"><i class="fa fa-pause"></i></a>
                        </div>
                        <div class="yd-duration jp-duration fr"></div>
                        <div class="yd-progress jp-progress">
                            <div class="yd-seek-bar jp-seek-bar">
                                <div class="yd-play-bar jp-play-bar"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item-intro row">
                    <div>
                        <span class="item-intro-hide"></span>
                        1、你也许不会相信，我常常想象你是多么美好</div>
                    <a href="javascript:;" class="item-intro-more fr">展开全文 <i class="fa fa-angle-down"></i></a>
                </div>
                <div class="item-f row">
                    <div class="item-tags fl"><strong>标签：</strong>
                        <a href="/tag/朱生豪/" target="_blank">朱生豪</a>
                        <a href="/tag/宁二/" target="_blank">宁二</a>
                        <a href="/tag/心情/" target="_blank">心情</a>
                    </div>
                    <div class="item-share fr">
                        <div class="bdsharebuttonbox"><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a></div>
                        
                    </div>
                </div>
            </div>
            <div class="item-pg row">
                <span class="fl"><a href="/article/1020/" class="podcast-prev"><i class="fa fa-angle-left"></i> 上一篇</a></span>
            </div>
            <div class="comments">
                <form class="comment-post row" method="post" action="/reply/?item_id=1021">
                <input type="hidden" name="_xsrf" value="2|90483451|7f779026e946ddaebd822dc24ba004c4|1508913242"/>
                    <textarea class="comment-text fl" placeholder="说点什么吧！" name="detail"></textarea>
                    <button type="submit" class="comment-btn fr">评论</button>
                </form>
            </div>
            <div class="comment-list" data-pid="1021">
                <ul class="tab row">
                    <li class="cur">最新评论（<span></span>）</li>
                </ul>
                <div class="comments-dom">
                    <div class="comments-loading"><img src="/static/website/images/loading.gif" alt="正在加载 - 悦读FM" /> 正在加载……</div>
                    <ul class="comments-list"></ul>
                </div>
            </div>
        </div>
        <div class="side fr">
            <div class="s-user">
                <UserCard></UserCard>
                <div class="item-status">
                    <a href="javascript:;" data-pid="1021" class="item-s-btn" id="item_digg" title="点个赞！">
                        <span class="item-s-b">
                            <i class="fa fa-thumbs-up"></i>
                            <span class="item-s-tip">赞</span>
                        </span>
                        <span id="digg_num">11</span>
                    </a>
                    <a href="javascript:;" data-pid="1021" class="item-s-btn" id="item_collect" title="收藏本文">
                        <span class="item-s-b">
                            <i class="fa fa-heart"></i>
                            <span class="item-s-tip">收藏</span>
                        </span>
                        <span id="collect_num">12</span>
                    </a>
                    <a href="#" class="item-s-btn shang" title="打赏主播">
                        <span class="item-s-b">
                            <i class="fa"><strong>赏</strong></i>
                            <span class="item-s-tip">打赏</span>
                        </span>
                        <span class="item-s-img"><img src="/static/file/dashang/0187f2e6f3520717c77a0f6a02d78383"></span>
                    </a>
                </div>
            </div>
            <div class="related-item">
                <h3><span class="fr"><a href="javascript:;" class="scroll-prev"><i class="fa fa-angle-left"></i></a><a href="javascript:;" class="scroll-next"><i class="fa fa-angle-right"></i></a></span>其他相关节目</h3>
                <div class="related-list scroll-wp row" style="width:1650px;">
                    <ul>
                        <li>
                            <a href="/article/414/"><img src="/static/file/medium/161d6e14b3e47bbca6560c8b3f6ad7ab" alt="与君生别离 - 悦读FM" /><span>与君生别离</span></a>
                        </li>
                        <li>
                            <a href="/article/500/"><img src="/static/file/medium/f6a126017e332d70c8b5c0ae9eea1a57" alt="小镇驿站 - 悦读FM" /><span>小镇驿站</span></a>
                        </li>
                        <li>
                            <a href="/article/309/"><img src="/static/file/medium/93cbf4d1a6bf472ccaa100ad3352d9a6" alt="传说 - 悦读FM" /><span>传说</span></a>
                        </li>
                        <li>
                            <a href="/article/419/"><img src="/static/file/medium/e40dc2b4ad0ab2dad2222654d10b2645" alt="你若安好 便是晴天 - 悦读FM" /><span>你若安好 便是晴天</span></a>
                        </li>
                        <li>
                            <a href="/article/702/"><img src="/static/file/medium/15bc9da072bce5bc272029c11c5e72db" alt="那封信，那棵树，那个人 - 悦读FM" /><span>那封信，那棵树，那个人</span></a>
                        </li>
                        <li>
                            <a href="/article/836/"><img src="/static/file/medium/4bf8240eae75e70e9196926dcdda55c7" alt="拂去风尘，回家的风景最美 - 悦读FM" /><span>拂去风尘，回家的风景最美</span></a>
                        </li>
                        <li>
                            <a href="/article/411/"><img src="/static/file/medium/353e1c928cdd4fc73f32d83e625e9a73" alt="路人铜狮张 - 悦读FM" /><span>路人铜狮张</span></a>
                        </li>
                        <li>
                            <a href="/article/613/"><img src="/static/file/medium/5653d56602e202bed0eeb3ee3e18df49" alt="小红门 - 悦读FM" /><span>小红门</span></a>
                        </li>
                        <li>
                            <a href="/article/366/"><img src="/static/file/medium/e2b81e436074c54d8cd77a464e7efd72" alt="你什么时候最美 - 悦读FM" /><span>你什么时候最美</span></a>
                        </li>
                        <li>
                            <a href="/article/155/"><img src="/static/file/medium/fd80d67193dcd7d6515f584534bcba3d" alt="拿两千块的薪水要有一万块的范儿 - 悦读FM" /><span>拿两千块的薪水要有一万块的范儿</span></a>
                        </li>
                        <li>
                            <a href="/article/426/"><img src="/static/file/medium/da6820f771d92ae8237523b2beeb8816" alt="我的愿望 - 悦读FM" /><span>我的愿望</span></a>
                        </li>
                        <li>
                            <a href="/article/980/"><img src="/static/file/medium/469b822bea870040b94f174849ced375" alt="面朝大海，春暖花开 - 悦读FM" /><span>面朝大海，春暖花开</span></a>
                        </li>
                        <li>
                            <a href="/article/84/"><img src="/static/file/medium/0e9e79f21edab6d7071f3b744abd7aee" alt="致你们即将逝去的“青春”——给09级 - 悦读FM" /><span>致你们即将逝去的“青春”——给09级</span></a>
                        </li>
                        <li>
                            <a href="/article/19/"><img src="/static/file/medium/cd851e935db8e95e73057b5793769502" alt="VOL.25 小王子 - 悦读FM" /><span>VOL.25 小王子</span></a>
                        </li>
                        <li>
                            <a href="/article/792/"><img src="/static/file/medium/5abd18a84f2adc673be1b2890462b5b8" alt="珍珠鸟 - 悦读FM" /><span>珍珠鸟</span></a>
                        </li>
                        <li>
                            <a href="/article/914/"><img src="/static/file/medium/9c0ba45e9c8f925ad2406b4b415a1d58" alt="汪国真诗选 - 悦读FM" /><span>汪国真诗选</span></a>
                        </li>
                        <li>
                            <a href="/article/349/"><img src="/static/file/medium/43cef77d4fec00d4f616446e5cc16966" alt="我在 - 悦读FM" /><span>我在</span></a>
                        </li>
                        <li>
                            <a href="/article/841/"><img src="/static/file/medium/44442ae204f12f9a4ce3312e0d2cce09" alt="杂诗·人生无根蒂 - 悦读FM" /><span>杂诗·人生无根蒂</span></a>
                        </li>
                        <li>
                            <a href="/article/97/"><img src="/static/file/medium/3f9cb4880565adccafabe0a5680a0e32" alt="爱情太短，遗忘太长 - 悦读FM" /><span>爱情太短，遗忘太长</span></a>
                        </li>
                        <li>
                            <a href="/article/825/"><img src="/static/file/medium/cdbe16f9b95e52a6ae4bb63462ea6758" alt="樟宜之夜 - 悦读FM" /><span>樟宜之夜</span></a>
                        </li>
                    </ul>
                    
                </div>
            </div>
            <div class="channel-item">
                <h3><span class="fr"><a href="/channel/1/" target="_blank">查看全部 <i class="fa fa-angle-right"></i></a></span>悦读频道其他节目</h3>
                <ul class="channel-list">
                    <li>
                        <a href="/article/334/">寂寞的烟</a>
                        <div><span>文：夏雨婷</span><span>主播：小林</span></div>
                    </li>
                    <li>
                        <a href="/article/96/">街</a>
                        <div><span>文：沈从文</span><span>主播：阿准</span></div>
                    </li>
                    <li>
                        <a href="/article/589/">光阴的故事</a>
                        <div><span>文：闻小语</span><span>主播：雨夜书简</span></div>
                    </li>
                    <li>
                        <a href="/article/103/">手心上的洁白花朵</a>
                        <div><span>文：安妮宝贝</span><span>主播：微蓝</span></div>
                    </li>
                    <li>
                        <a href="/article/806/">她不在，他再也不打豆浆了</a>
                        <div><span>文：田媛</span><span>主播：冷剑</span></div>
                    </li>
                </ul>
            </div>
            <!--<div class="side-sponsor">
                <img src="/static/website/images/yueduwx_2.jpg">
            </div>
            -->
            <div class="side-sponsor">
                <div class="fmad"></div>
            </div>
        </div>
    </div>
</template>
<script>
import UserCard from "../common/usercard";
export default {
  data() {
    return {
      jsonData: null
    };
  },
  methods: {},
  created() {},
  components: {
    UserCard
  }
};
</script>
<style>
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, input, textarea, button, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;outline:0;font-size:100%;}
img {border:none;}
table {border-collapse:collapse;border-spacing: 0;}
q:before, q:after, blockquote:before, blockquote:after {content: "";}
ol, ul {list-style:none;}
a {text-decoration:none; color:#707070;}
a:hover {color:#ee5044;}

a, button, .yd-player-tip {-webkit-transition:all .4s ease; -moz-transition:all .4s ease; -ms-transition:all .4s ease; transition:all .4s ease;}
::selection {background:#ee5044; color:#FFF;}
html, body, input, textarea, button {-webkit-font-smoothing:antialiased;}
html,body {width:100%; height:100%;}
body {background:#F5F5F5; color:#707070; font:12px/1.5 "Open Sans",Arial,"Hiragino Sans GB","Microsoft YaHei","微软雅黑","STHeiti","WenQuanYi Micro Hei",SimSun,sans-serif; letter-spacing:0.5px;}
textarea {resize:none;}
label {cursor:pointer;}
.fl {float:left;}
.fr {float:right;}
.row:after {content:""; display:table; clear:both;}
.hd-wp, #bd, #ft, .my-wp {width:1010px; margin:auto;}
.hide {display:none;}
.mb40 {margin-bottom:40px;}
.f12 {font-size:12px;}
.f16 {font-size:16px;}
.red {color:#ee5044;}
.gray {color:#999;}
.red-link {color:#ee5044;}
.red-link:hover {color:#d7382c;}
.gray-link {color:#999;}
.gray-link:hover {color:#ee5044;}


.set-title {font-size:18px; margin-bottom:25px;}
.setting-form {}
.form-controls {overflow:hidden; padding-bottom:15px;}
.form-label {display:block; width:80px; text-align:right; line-height:35px; float:left;}
.form-input {margin-left:110px; color:#999;}
.input {padding:10px 15px; box-shadow:1px 1px 2px rgba(0,0,0,.1); background:#FFF;}
select.input {border-radius:0; height:35px; border:0;}
.btn {height:36px; padding:0 30px; background:#ee5044; color:#FFF; text-align:center; cursor:pointer;}
.btn:hover {background:#d7382c;}
button[disabled="disabled"], button[disabled="disabled"]:hover {color:#CCC; background:#EEE; cursor:default; text-shadow:1px 1px 1px #FFF;}

.tab {height:40px;}
.tab li {float:left; padding:0 15px; line-height:40px; cursor:pointer;}
.tab li.cur {color:#ee5044; background:#FFF;}
.sub-tab {overflow:hidden; margin-bottom:40px;}
.sub-tab li {float:left; margin-right:20px;}
.sub-tab li a {display:block; padding:0  10px 4px 10px; font-size:14px;}
.sub-tab li.cur a {font-weight:bold; border-bottom:2px solid #ee5044; padding:0 10px 2px 10px;}
.pg {text-align:center; padding:30px;}
.pg a, .pg span {padding:3px 10px;}
.pg .cur {color:#ee5044; font-weight:bold;}
.comment-pg {background:#FFF; border-top:1px solid #EEE;}
.follow-link {font-size:12px; padding:0 15px; color:white; background:#ee5044; line-height:30px; display:inline-block;}
.follow-link:hover {color:white; background:#d7382c;}
.followed {background:#999;}
.followed:hover {background:#777;}

#hd {width:100%; height:100px; background:#FFF;}
.hd-wp {padding:38px 0; height:30px;}
.logo {width:120px; line-height:30px;}
.logo a {display:block; width:100%; height:100%; font-size:14px;}
.logo a:hover {color:#F30;}
.mlogo {width:20px; height:30px; display:block; margin-right:15px;}
.mlogo span {width:4px; background:#ee5044; display:block; border-radius:2px;}
.logo-a {height:18px; margin:6px 4px 0 0;}
.logo-b {height:28px; margin:0 4px 0 0;}
.logo-c {height:18px; margin:6px 0 0 0;}
.menu {margin:0 300px 0 120px; text-align:center;}
.menu a {display:inline-block; padding:0 20px; line-height:30px; font-size:14px;}
.menu a.cur {color:#F30;}
.mine {border-left:1px dotted #CCC; height:20px; line-height:20px; margin:5px 0 5px 20px;}
.login a {padding-left:20px;}
.loged {padding-left:20px; position:relative;}
.loged a {display:block; line-height:20px;}
.log-user {background-position:0 -112px; background-color:#FFF; display:inline-block; width:6px; height:4px; vertical-align:2px; margin-left:5px;}
.user-menu {position:absolute; top:30px; right:0; background:#FFF; box-shadow:1px 1px 3px rgba(0,0,0,.1); width:75px; z-index:2;}
.user-menu:before {position:absolute; top:-8px; right:15px; display:inline-block; border-right:8px solid transparent; border-bottom:8px solid #F5F5F5; border-left:8px solid transparent; content:'';}
.user-menu:after {position:absolute; top:-7px; right:16px; display:inline-block; border-right:7px solid transparent; border-bottom:7px solid #FFF; border-left:7px solid transparent; content:'';}
.user-menu a {display:block; line-height:20px; padding:3px 10px;}
.user-menu a:hover {background:#F5F5F5;}
.search {box-shadow:1px 1px 1px rgba(0,0,0,.05); height:20px; overflow:hidden; width:150px; margin:5px 0;}
.key {border:none; border-radius:0; background:transparent; width:120px; height:16px; line-height:16px; padding:2px 5px;}
.sbtn {width:20px; height:20px; background-color:#FFF; cursor:pointer; color:#999;}
.sbtn:hover {color:#666;}

#bd {padding:40px 0;}
.wp {width:620px;}
.side {width:360px;}
.side-sponsor {overflow:hidden; margin-bottom:30px;}

#ft {padding-bottom:40px; color:#AAA;}
.ft-links {padding-bottom:8px;}

.item {}
.item-base {background:#FFF; padding:30px; margin-bottom:30px;}
.item-name {font-size:24px; line-height:24px; margin-bottom:8px;}
.item-meta {color:#999; line-height:20px; margin-bottom:25px;}
.item-meta em {font-style:normal; margin-right:20px;}
.item-pic {overflow:hidden;}
.item-pic img {width:100%; display:block;}
.item-intro {padding:20px 30px; background:#FFF; margin-bottom:30px;}
.item-intro p {padding:10px 0;}
.item-intro div {height:280px; overflow:hidden; position:relative; line-height:22px; letter-spacing:1px;}
.item-intro-hide {display:block; width:100%; height:40px; position:absolute; bottom:0; left:0; background-image:-moz-linear-gradient(top, rgba(255,255,255,0), #FFF); background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255,255,255,0)), color-stop(1, #FFF));}
.item-f {padding:5px 30px; background:#FFF; margin-bottom:30px; line-height:28px;}
.item-tags a {margin-right:10px;}
.item-pg {font-size:14px; padding:0 30px; margin-bottom:30px;}
.comments {}
.comment-post {margin-bottom:30px;}
.comment-btn {width:70px; background:#ee5044; font-size:12px; color:white; text-align:center; height:50px; line-height:50px; border:none; outline:0; cursor:pointer;}
.comment-btn:hover {background:#d7382c;}
.comment-text {background:#FFF; width:530px; padding:10px; height:30px; line-height:16px; font-size:12px;}
.comments-dom {position:relative; overflow:hidden;}
.comments-list {background:#FFF; padding:30px 30px 0;}
.comments-list li {border-bottom:1px dashed #EEE; padding-bottom:20px; margin-bottom:20px;}
.comments-list li:last-child {margin:0; border:0;}
.comments-loading {width:100%; height:100%; background:rgba(255,255,255,.8); position:absolute; top:0; left:0; padding-top:50px; text-align:center; font-size:14px; display:none;}
.comments-loading img {vertical-align:middle; width:30px; margin-right:15px;}
.comment-avatar {width:40px; overflow:hidden;}
.comment-avatar img {width:100%; display:block;}
.comment-c {margin-left:55px;}
.comment-meta {margin-bottom:5px; color:#999; line-height:22px;}
.digg {color:#ee5044;}
.comment-meta span {margin-left:8px;}
.comment-user {font-size:14px; font-weight:bold;}
.comment-p {margin-bottom:15px;}
.no-comment {text-align:center; padding:0 0 30px 0; font-size:16px; background:#FFF;}

.items {margin-bottom:10px; width:100%;}
.items ul {overflow:hidden; width:640px;}
.items li {float:left; width:140px; margin:0 20px 20px 0;}
.items li a {display:block; background:#F9F9F9; text-align:center; color:#707070; line-height:50px; font-size:14px; padding:0 5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.items li a:hover {color:#000; background:#EEE;}
.items li.cur a {background:#FFF; color:#ee5044;}

.yd-player {padding:30px 0 0 0; position:relative;}
.yd-player-tip {background:#FFF; color:#999; padding:5px 0; border-radius:3px; position:absolute; left:45px; top:6px; display:none; width:190px; text-align:center; border:1px solid #EEE;}
.yd-player-tip:before {position:absolute; bottom:-8px; left:15px; display:inline-block; border-right:8px solid transparent; border-top:8px solid #EEE; border-left:8px solid transparent; content:'';}
.yd-player-tip:after {position:absolute; bottom:-7px; left:16px; display:inline-block; border-right:7px solid transparent; border-top:7px solid #FFF; border-left:7px solid transparent; content:'';}
.yd-player:hover .yd-player-tip {display:block;}
.yd-controls {width:36px; height:36px; overflow:hidden;}
.yd-controls a {width:36px; line-height:36px; display:block; text-align:center; color:#ee5044; font-size:21px;}
.yd-controls a:hover {color:#d7382c;}
.yd-duration {width:50px; line-height:36px; font-size:14px; color:#a8a8a8; text-align:center;}
.yd-progress {margin:17px 60px 17px 45px; height:2px; overflow:hidden; background:#F2F2F2;}
.yd-seek-bar {height:2px; background:#DDD; overflow:hidden;}
.yd-play-bar {height:2px; background:#ee5044; overflow:hidden;}

.s-user {background:#FFF; margin-bottom:30px; position:relative;}
.s-user:before {position:absolute; top:63px; left:-20px; display:inline-block;
    border-right:10px solid #FFF;
    border-bottom:10px solid transparent;
    border-left:10px solid transparent;
    border-top:10px solid transparent;
    content:'';}
.s-user-base {padding:30px; border-bottom:1px dashed #EEE;}
.s-user-avatar {width:80px; overflow:hidden;}
.s-user-avatar img {width:100%; display:block;}
.s-user-c {margin-left:110px;}
.s-user-name {font-size:16px; padding-bottom:15px;}
.s-user-name i {font-size:14px;}
.s-user-info {}
.s-user-status {}
.s-user-follow {padding-top:3px;}
.item-status {padding:20px 0; text-align:center;}
.item-s-btn {display:inline-block; line-height:52px; font-size:18px; margin:0 35px 0 0;}
.item-s-btn:hover {color:#000;}
.item-s-tip {display:none; font-size:12px;}
.item-s-b {display:inline-block; width:50px; height:50px; border:1px solid #ACACAC; line-height:50px; text-align:center; color:#999; margin-right:15px; border-radius:50%; font-size:18px;}
.item-s-b i {vertical-align:middle;}
.item-s-btn:hover .item-s-b {border:1px solid #999; color:#FFF; background:#999;}
.item-s-btn:hover .item-s-b i {display:none;}
.item-s-btn:hover .item-s-b .item-s-tip {display:inline;}
.item-s-btn.cur {color:#ee5044;}
.item-s-btn.cur .item-s-b {border:1px solid #ee5044; color:#ee5044;}
.item-s-btn.cur:hover {color:#d7382c;}
.item-s-btn.cur:hover .item-s-b {border:1px solid #d7382c; background:#d7382c; color:#FFF;}
.item-s-btn.shang {margin-right:0px;width: 52px;height: 52px;display: inline-block;}
.item-s-btn.shang .item-s-b {margin-right:0px;}
.item-s-btn.shang:hover {color:#d7382c;}
.item-s-btn.shang:hover .item-s-b {border:1px solid #d7382c; background:#d7382c; color:#FFF;display:block;}
.item-s-img {display: none;position: absolute;margin-left: -50px;margin-top: -260px;}
.item-s-btn.shang:hover .item-s-img {display:block;}

.related-item, .channel-item {padding:30px; background:#FFF; margin-bottom:30px; overflow:hidden;}
.related-item h3, .channel-item h3, .my-list h3 {font-size:14px; border-left:3px solid #ee5044; padding-left:8px; line-height:16px;}
.related-item h3 span {font-size:18px;}
.related-item h3 span a {display:inline-block; width:20px; text-align:center;}
.related-item h3 span a:hover {background:#F9F9F9;}
.channel-item h3 span {font-size:12px; font-weight:normal;}
.scroll-prev.none, .scroll-next.none {color:#CCC;}
.scroll-prev.none:hover, .scroll-next.none:hover {background:transparent; cursor:default;}
.related-list li {padding-top:30px; width:135px; margin-right:30px; float:left;}
.related-list li a {display:block;}
.related-list li img {width:100%; display:block;}
.related-list li span {display:block; width:100%; padding-top:10px; line-height:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.channel-list {padding-top:30px;}
.channel-list li {padding-bottom:10px; border-bottom:1px dashed #EEE; margin-bottom:10px; line-height:20px;}
.channel-list li div {color:#999;}
.channel-list li div span {margin-right:20px;}
.channel-list li:last-child {border:none; padding:0; margin-bottom:0;}

.channel-top10 li {border-bottom:1px solid #EEE; list-style:decimal; margin-left:20px;}

.channels li {overflow:hidden; margin-bottom:30px; background:#FFF;}
.channel-pic {height:210px; width:210px; overflow:hidden;}
.channel-pic img {height:100%; display:block;}
.channel-body {margin-left:210px; padding:30px;}
.channel-title {font-size:18px; margin-bottom:10px;}
.channel-meta {margin-bottom:25px; color:#999;}
.channel-meta span {display:inline-block; margin-right:15px;}
.channel-desc {line-height:22px; letter-spacing:1px;}

.pop {position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.5); z-index:999;}
.pop-wp {background:#FFF; padding:30px 50px 50px; width:280px; position:absolute; top:120px; left:-50%; margin-left:-190px;}
.pop-title {font-size:24px; margin-bottom:20px; line-height:24px;}
.pop-tip {line-height:24px;}
.pop-close {position:absolute; top:-15px; right:-15px; width:30px; line-height:30px; text-align:center; background:#444; color:#CCC; font-size:24px; border-radius:50%;}
.pop-close:hover {background:#000; color:#FFF;}

.account-form {border:1px solid #dcdcdc; padding:0 15px;}
.account-input {height:20px; width:100%; display:block; margin:10px 0;}
.account-line {width:100%; height:1px; background:#dcdcdc; overflow:hidden;}
.account-other {padding:15px 5px;}
.account-other .error-tip .error {top:5px!important; left:12px!important;}
.account-btn {width:100%; height:45px; background:#eb4235; color:#FFF; text-align:center; cursor:pointer; font-size:14px;}
.account-btn:hover {background:#d1271a;}
.error-tip {position:relative;}
.error-tip span {position:absolute; top:-5px; left:0; padding:2px 8px; background:rgba(238,80,68,.8); color:#FFF; border-radius:3px; display:block;}
.error-tip span:before {position:absolute; top:-5px; left:8px; display:inline-block; border-right:5px solid transparent; border-bottom:5px solid rgba(238,80,69,.8); border-left:5px solid transparent; content:'';}
.reg-success h3 {font-size:16px; line-height:24px; margin-bottom:15px;}
.reg-success p {line-height:22px;}
.resend {display:inline-block; vertical-align:0px; border:0; border-radius:0; background:#FFF; color:#ee5044; cursor:pointer;}
.resend:hover {color:#d7382c;}

.my-head {width:100%; height:400px; position:relative; z-index:1; margin-bottom:250px;}
.my-bg {position:relative; z-index:2; width:100%; height:400px; overflow:hidden;}
.my-bg img {position:absolute; top:50%; left:50%; width:1600px; height:400px; margin:-200px 0 0 -800px;}
.my-base {position:absolute; top:330px; left:50%; width:600px; margin-left:-300px; z-index:3; text-align:center;}
.my-avatar {width:100px; height:100px; padding:4px; border-radius:50%; margin:auto; background:#FFF;}
.my-avatar img {display:block; width:100%; height:100%; border-radius:50%;}
.my-info {padding-top:20px;}
.my-name {font-size:16px; color:#000; border-top:4px solid #ee5044; line-height:30px; display:inline-block; padding:0 5px;}
.my-desc {margin-bottom:10px;}
.my-social {padding-top:10px; margin-bottom:10px;}
.my-social a {margin:0 5px;}
.social-weibo, .social-douban, .social-qq {display:inline-block; width:20px; height:20px; line-height:20px; color:#FFF; text-align:center; vertical-align:middle;}
.social-weibo:hover, .social-douban:hover, .social-qq:hover {color:#FFF;}
.social-weibo {background:#e0523e;}
.social-douban {background:#48925d;}
.social-qq img {width:100%; height:100%;}
.my-follow {display:inline-block; padding:10px 15px; background:#FFF; box-shadow:1px 1px 1px rgba(0,0,0,.1);}
.my-follow span {display:inline-block; width:1px; height:14px; margin:0 10px; background:#F2F2F2; overflow:hidden; vertical-align:middle;}
.my-list {width:1010px; overflow:}
.my-list h3 {font-weight:normal;}
.my-list ul {padding:20px 0; width:1060px;}
.my-list li {width:215px; margin:0 50px 30px 0; float:left;}
.my-list li a {display:block; padding:5px; width:205px; background:#FFF; box-shadow:1px 1px 1px rgba(0,0,0,.05);}
.my-list li a:hover {box-shadow:1px 1px 3px rgba(0,0,0,.12);}
.my-list li a:hover .item-play {display:block;}
.my-list-pic {width:205px; height:130px; overflow:hidden; position:relative;}
.my-list-pic img {width:100%;}
.item-play {position:absolute; display:none; width:32px; height:50px; line-height:50px; padding-left:18px; top:50%; left:50%; margin-left:-25px; margin-top:-25px; font-size:24px; background:rgba(0,0,0,.6); color:#FFF; border-radius:50%;}
.my-list-name {text-align:center; line-height:50px; padding:5px 5px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.follows {width:1010px; overflow:hidden;}
.follows ul {width:1040px;}
.follows li {width:100px; margin:0 30px 30px 0; float:left;}
.follows li a {display:block; background:#FFF;}
.follows li a:hover {box-shadow:1px 1px 1px rgba(0,0,0,.05);}
.follow-avatar {width:100px; height:100px; overflow:hidden;}
.follow-avatar img {width:100%;}
.follow-name {line-height:30px; padding:0 5px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.ft-follow {}
.ft-follow div {width:40px; height:40px; line-height:40px; text-align:center; position:relative; border-radius:50%; background:#DDD; font-size:20px; display:inline-block; margin-left:10px; color:#707070;}
.ft-follow div a {display:block;}
.ft-follow div:hover span {display:block;}
.ft-follow span {width:142px; height:142px; display:none; position:absolute; left:50%; margin-left:-71px; bottom:50px;}
.ft-follow span img {width:100%;}

.set-avatar {width:38px; height:38px; display:inline-block; vertical-align:middle; margin-left:20px;}
.set-toppic {margin:0 0 15px 110px;}
.set-toppic img {display:block; width:198px; float:left; margin:0 16px 20px 0; border:5px solid #F5F5F5; cursor:pointer;}
.set-toppic img:hover {border:5px solid #DDD;}
.set-toppic img.cur {border:5px solid #ee5044;}
.page-content {line-height:22px; letter-spacing:1px;}


.juanzhu {width: 142px;height: 142px;display: none;position: absolute;left: 50%;margin-left: -71px;bottom: 50px;}
</style>
